<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Duncan's Just-In-Time Donuts</title>
	<link rel="stylesheet" type="text/css" href="donuts.css">

	<script type="text/javascript">
	function updateOrder(){
		const TAXRATE = 0.0925;
		const DONUTPRICE = 0.50;
		var numCakeDonuts = parseDonuts(document.getElementById("cakedonuts").value);
		var numGlazedDonuts = parseDonuts(document.getElementById("glazeddonuts").value);
		if (isNaN(numCakeDonuts)) {
			numCakeDonuts = 0;
		};
		if (isNaN(numGlazedDonuts)) {
			numGlazedDonuts = 0;
		};
		var subTotal = (numCakeDonuts + numGlazedDonuts) * DONUTPRICE;
        var tax = subTotal * TAXRATE;
        var total = subTotal + tax;
        document.getElementById("subtotal").value = "$" + subTotal.toFixed(2);
        document.getElementById("tax").value = "$" + tax.toFixed(2);
        document.getElementById("total").value = "$" + total.toFixed(2);
	}

	function parseDonuts(donutString){
		var numDonuts = parseInt(donutString)
		if (donutString.indexOf("dozen") != -1)
			numDonuts *= 12;

		return numDonuts;
	}

	function placeOrder(form) {
        if (document.getElementById("name").value == "")
          alert("I'm sorry but you must provide your name before submitting an order.");
        else if (document.getElementById("pickupminutes").value == "" ||
          isNaN(document.getElementById("pickupminutes").value))
          alert("I'm sorry but you must provide the number of minutes until pick-up before submitting an order.");
        else
          // Submit the order to the server
          form.submit();
      }
	</script>

</head>
<body>
<div id="frame">
	<div class="heading">Doncan's 你好。。。这只是一个测试</div>
	<div class="subheading"> 这事一个测试、测试、测试、测试</div>
	<div id="left">
		<img src="donuttime.png" alt="测试测试" />
	</div>

	<form name="orderform" action="donuts.php" method="POST">
		<div class="field">
			Name:<input type="text" id="name" name="name" value="" />
		</div>
		<div class="field">
			#of cake donuts:<input type="text" id="cakedonuts" name="cakedonuts" value="" onchange="updateOrder();"/>
		</div>
		<div class="field">
			#of glazed donuts:<input type="text" id="glazeddonuts" name="glazeddonuts" value="" onchange="updateOrder();" />
		</div>
		<div class="field">
        Minutes 'til pickup: <input type="text" id="pickupminutes" name="pickupminutes" value="" />
        </div>
        <div class="field">
        Subtotal: <input type="text" id="subtotal" name="subtotal" value="" readonly="readonly" />
        </div>
        <div class="field">
        Tax: <input type="text" id="tax" name="tax" value="" readonly="readonly" />
        </div>
        <div class="field">
        Total: <input type="text" id="total" name="total" value="" readonly="readonly" />
        </div>
        <div class="field">
        <input type="button" value="Place Order" onclick="placeOrder(this.form);" />
        </div>
	</form>
</div>
</body>
</html>